import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import World from '@/components/World'
import drister from '@/components/drister'
import fors from '@/components/forearch'
import Pretty from '@/components/pretty_list'
import SPAComponent from '@/components/SPAComponent'
import sub from '@/components/test_sub'
import filter from '@/components/filter/filter'
import dom from '@/components/dom/dom'
import swipe from '@/components/mintUI/swipe'
import home from '@/components/router/home'
import music from '@/components/router/music'
import movie from '@/components/router/movie'
import demoHome from '@/components/router/demo/demo_home'
import demoDetail from '@/components/router/demo/detail'
import demoList from '@/components/router/demo/list'
import programming from '@/components/programming/programming'
import notFound from '@/components/404_redirect/notFound.vue'
import nestRouter from '@/components/nest_router/nestRouter'
import oumei from '@/components/nest_router/oumei'
import rihan from '@/components/nest_router/rihan'
import vueResource from '@/components/vue_resource/vueResource'
import axios from '@/components/axios/axios_learn'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/world',
      name: 'world',
      component: World
    },
    {
      path: '/drister',
      name: 'drister',
      component: drister
    },
    {
      path: '/fors',
      name: 'fors',
      component: fors
    },
    {
      path: '/pretty_list',
      name: 'pretty_list',
      component: Pretty
    },
    {
      path: '/SPAComponent',
      name: 'SPAComponent',
      component: SPAComponent
    },
    {
      path: '/sub',
      name: 'sub',
      component: sub
    },
    {
      path: '/filter',
      name: 'filter',
      component: filter
    },
    {
      path: '/dom',
      name: 'dom',
      component: dom
    },
    {
      path: '/swipe',
      name: 'swipe',
      component: swipe
    },
    {
      path: '/home',
      name: 'home',
      component: home
    },
    // {
    //   path: '/music',
    //   name: 'music',
    //   component: music
    // },
    {
      path: '/music',
      name: 'music',
      component: music,
      children: [{
        // 写/是绝对路径   不写是相对路径  /music/oumei
        name: 'oumei',
        path: 'oumei',
        component: oumei
      },
      {
        name: 'rihan',
        path: '/rihan',
        component: rihan
      }]
    },
    {
      path: '/movie',
      name: 'movie',
      component: movie
    },
    {
      path: '/demoHome',
      name: 'demoHome',
      component: demoHome
    },
    //  如果是params的形式
    //  <router-link :to="{name:'demoDetail',params:{id:index}}">查看</router-link>
    //  需要在path中这样写  /demoDetail/:id
    {
      path: '/demoDetail',
      name: 'demoDetail',
      component: demoDetail
    },
    {
      path: '/demoList',
      name: 'demoList',
      component: demoList
    },
    // 测试多个坑，一个页面多个组件
    {
      path: '/hh',
      name: 'hh',
      components: {
        header: home,
        default: movie,
        footer: music
      }
    },
    {
      path: '/programming',
      name: 'programming',
      component: programming
    },
    {
      path: '/nestRouter',
      name: 'nestRouter',
      component: nestRouter
    },
    {
      path: '/',
      redirect: {name: 'nestRouter'}
    },
    {
      path: '/axios',
      name: 'axios',
      component: axios
    },
    {
      path: '/vueResource',
      name: 'vueResource',
      component: vueResource
    },
    // {
    //   path: '/',
    //   redirect: {name:'home'}
    // },
    // {
    //   path: '/',
    //   redirect: '/home'
    // },
    // 最终无法匹配-->404
    {
      path: '*',
      name: 'notFound',
      component: notFound
    }
  ]
})
